<template>
	<view class="pages">
		<!-- 模块一 -->
		<view class="items">
			<view class="li">
				<view class="row" style="margin-right: 20rpx;">
					<view class="rowTitle">
						{{$t('AddNewPolicy.AgentID')}}
					</view>
					<view class="rowContnet">
						<u--input placeholder="Agent ID" border="none" v-model="FormData.create_id"
							:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"
							disabled="true"></u--input>
					</view>
				</view>
				<view class="row" style="margin-left: 20rpx;">
					<view class="rowTitle">

						{{$t('AddNewPolicy.AgentLevel')}}
					</view>
					<view class="rowContnet">
						<u--input placeholder="Agent Level" border="none" v-model="FormData.create_level"
							:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"
							disabled="true"></u--input>
					</view>
				</view>
			</view>
			<view class="row" style="margin-bottom: 10rpx;">
				<view class="rowTitle">
					<!-- Agent Name -->
					{{$t('AddNewPolicy.AgentName')}}
				</view>
				<view class="rowContnet">
					<u--input placeholder="Agent Name" border="none" v-model="FormData.create_name"
						:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"
						disabled="true"></u--input>
				</view>
			</view>
		</view>
		<!-- 模块二 -->
		<view class="items" style="margin-top: 20rpx;">

			<view class="row" style="margin-bottom: 10rpx;">
				<view class="rowTitle">
					<!-- Policy Number -->
					{{$t('AddNewPolicy.PolicyNumber')}}
				</view>
				<view class="rowContnet">
					<u--input :placeholder="$t('AddNewPolicy.PolicyNumber.placeholder')" border="none"
						v-model="FormData.number"
						:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"></u--input>
				</view>
			</view>

			<view class="row" style="margin-bottom: 10rpx;">
				<view class="rowTitle">
					Select a Product
				</view>

				<!-- 公司选择器 -->
				<u-picker :show="Companyshow" :columns="Companycolumns" keyName="label" @confirm="Companyconfirm"
					@cancel="Companyshow = false" :confirmText="$t('Confirm')" :cancelText="$t('Cancel')"></u-picker>
				<!-- 产品类型选择器 -->
				<u-picker :show="ProductTypeshow" :columns="ProductTypecolumns" keyName="label"
					@confirm="ProductTypeconfirm" @cancel="ProductTypeshow = false" :confirmText="$t('Confirm')"
					:cancelText="$t('Cancel')"></u-picker>
				<!-- 产品选择器 -->
				<u-picker :show="Productshow" :columns="Productcolumns" keyName="label" @confirm="Productconfirm"
					@cancel="Productshow = false" :confirmText="$t('Confirm')" :cancelText="$t('Cancel')"></u-picker>


				<view class="rowContnet selectBox" @click="Companyshow = true">
					<span>{{CompanyTip ? CompanyTip :  this.$t('AddNewPolicy.SelectCompany')}}</span>
					<view class="icon">
						<image src="../../static/xialasss.png" style="width: 40rpx;height: 40rpx;" v-if="Companyshow == false"></image>
						</image>
						<image src="../../static/shanglass.png" style="width: 40rpx;height: 40rpx;" v-else></image>
						</image>
					</view>
				</view>


				<view class="rowContnet selectBox" @click="ProductTall">
					<span>{{ProductTypeTip ? ProductTypeTip :  this.$t('AddNewPolicy.SelectProductType')}}</span>
					<view class="icon">
						<image src="../../static/xialasss.png" style="width: 40rpx;height: 40rpx;" v-if="ProductTypeshow == false"></image>
						</image>
						<image src="../../static/shanglass.png" style="width: 40rpx;height: 40rpx;" v-else></image>
						</image>
					</view>
				</view>


				<view class="rowContnet selectBox" @click="Producttoc">
					<span>{{ProductTip ? ProductTip : this.$t('AddNewPolicy.SelectProduct')}}</span>
					<view class="icon">
						<image src="../../static/xialasss.png" style="width: 40rpx;height: 40rpx;" v-if="Productshow == false"></image>
						</image>
						<image src="../../static/shanglass.png" style="width: 40rpx;height: 40rpx;" v-else></image>
						</image>
					</view>
				</view>
			</view>

			<view class="row" style="margin-bottom: 10rpx;">
				<view class="rowTitle">
					<!-- Insured -->
					{{$t('AddNewPolicy.Insured')}}
				</view>
				<view class="rowContnet">
					<u--input :placeholder="$t('AddNewPolicy.Insured.pld')" border="none"
						v-model="FormData.protect_user"
						:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"></u--input>
				</view>
			</view>

			<view class="row" style="margin-bottom: 10rpx;">
				<view class="rowTitle">
					<!-- Face Amount -->
					{{ProductTypeTip == 'ANNUITY' ? $t('Annuity') : $t('AddNewPolicy.FaceAmount') }}
				</view>
				<view class="rowContnet">
					<u--input :placeholder="$t('AddNewPolicy.FaceAmount.pld')" type="digit" border="none"
						v-model="FormData.money"
						:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"></u--input>
				</view>
			</view>

			<view class="row" style="margin-bottom: 10rpx;">
				<view class="rowTitle">
					<!-- State -->
					{{$t('AddNewPolicy.State')}}
				</view>
				<view class="rowContnet">
					<u--input :placeholder="$t('AddNewPolicy.State.pld')" border="none" v-model="FormData.sign_city"
						:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"></u--input>
				</view>
			</view>

			<view class="row" style="margin-bottom: 10rpx;">
				<view class="rowTitle">
					{{$t('AddNewPolicy.DateofCreation')}}
				</view>
				<!-- 				<u-datetime-picker :show="createdateshow" v-model="data" :minDate="-631152000000" mode="date"
					@confirm="dateconfirm" @cancel="createdateshow = false" :confirmText="$t('Confirm')" :cancelText="$t('Cancel')"></u-datetime-picker> -->
				<view class="rowContnet selectBox" style="background-color: #f5f7fa;" @click="createdateshow = true">
					<span>{{deal_time_tips ? deal_time_tips : this.$t('AddNewPolicy.DateofCreation')}}</span>
					<!-- 	<view class="icon">
						<u-icon name="arrow-down" v-if="createdateshow == false"></u-icon>
						<u-icon name="arrow-up" v-else></u-icon>
					</view> -->
				</view>
			</view>

			<!-- 添加多个agent -->
			<view class="AgentBox" v-for="(agentItems,index) in splitAgentData" :key="index">
				<view class="li">
					<view class="row" style="margin-right: 20rpx;">
						<view class="rowTitle">
							<!-- Agent ID -->
							{{$t('AddNewPolicy.AgentID')}}
						</view>
						<view class="rowContnet">
							<u--input placeholder="Agent ID" border="none" v-model="agentItems.search_id"
								:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"
								@blur="searchAgentId(index)"></u--input>
						</view>
					</view>
					<view class="row" style="margin-left: 20rpx;">
						<view class="rowTitle">
							<!-- Agent Level -->
							{{$t('AddNewPolicy.AgentLevel')}}
						</view>
						<view class="rowContnet">
							<u--input placeholder="Agent Level " border="none" v-model="agentItems.create_name"
								:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"
								disabled="true"></u--input>
						</view>
					</view>
				</view>
				<view class="row" style="margin-bottom: 10rpx;">
					<view class="rowTitle">
						<!-- Agent Name -->
						{{$t('jingjiren')}}
					</view>
					<view class="rowContnet">
						<u--input placeholder="Agent Name" border="none" v-model="agentItems.create_level"
							:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"
							disabled="true"></u--input>
					</view>
				</view>
				<view class="row" style="margin-bottom: 10rpx;">
					<view class="rowTitle">
						<!-- Split Percent -->
						{{$t('fendanbili')}}
					</view>
					<view class="rowContnet">
						<u--input placeholder="Split Percent" border="none" type="digit" v-model="agentItems.share_rate"
							:customStyle="{height:'100%',boxSizing:'border-box',padding:'0 20rpx'}"
							:disabled="agentItems.user_id == null"></u--input>
					</view>
				</view>
				<view class="remove" @click="remove(index)">
					{{$t('Remove')}}
				</view>
			</view>



			<view class="row rowsw" style="margin: 30rpx 0 20rpx;" @click="addAgent">
				<span style="font-size: 40rpx;margin-right: 5rpx;color: #f5f7fa;">+</span>
				<span>{{$t('AddSplitAgent')}}</span>
			</view>

			<view class="row" style="margin-bottom: 10rpx;">
				<view class="rowTitle">
					{{$t('PolicyRemarks')}}
				</view>
				<view class="rowContnet111" style="height: 200rpx;">
					<u--textarea v-model="FormData.desc" :placeholder="$t('PolicyRemarks')" border="none"
						style="height: 148rpx;"></u--textarea>
				</view>
			</view>
			<u-button type="primary" :text="$t('AddNewPolicy.Confirm')"
				:customStyle="{width:'640rpx',height:'80rpx',backgroundColor:'#273562',color:'#fff',margin:'30px auto 30rpx',fontWeight:'700',border:'none',borderRadius: '16rpx'}"
				@click="submit"></u-button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newUrl: 1, //0为新接口1为老接口
				Company_id: null, //公司id
				ProductType_id: null, //产品类型id
				FormData: {
					create_id: null,
					create_level: '',
					create_name: '',
					number: '',
					sign_city: '',
					protect_user: '',
					desc: '',
					money: '',
					share_rate: [],
					deal_time: '',
					product_id: null
				},

				CompanyTip: '',
				ProductTypeTip: '',
				ProductTip: '',
				Companyshow: false, //公司下拉开关
				ProductTypeshow: false, //产品类型下拉开关
				Productshow: false, //产品下拉开关
				createdateshow: false, //创建日期
				deal_time_tips:'',
				data: '',
				Companycolumns: [
					[{
						label: 'Athene',
						id: 0
					}, {
						label: 'F$G',
						id: 1
					}]
				],
				ProductTypecolumns: [
					[{
						label: 'LIFE',
						id: 0
					}, {
						label: 'ANNUITY',
						id: 1
					}]
				],
				Productcolumns: [
					[{
						label: 'Allianz 222[0-75]',
						id: 0
					}, {
						label: 'Allianz 222[76-80]',
						id: 1
					}]
				],
				splitAgentData: [{
					user_id: null,
					create_name: '',
					share_rate: '',
					create_level: '',
					search_id: ''
				}]
			}
		},
		created() {
			this.getCreateUserInfo()
			this.getBrandList()
			this.getProductType()
			this.getProduct()
			this.getDateBao()
		},
		methods: {
			// 获取创建人信息
			getCreateUserInfo() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/order/create-user`, {}, this.newUrl).then(res => {
					this.FormData.create_id = res.data.data.id
					this.FormData.create_level = res.data.data.level.name
					this.FormData.create_name = res.data.data.real_name
				}).catch(Error => {
					console.log(Error, 'Error');
				})
			},
			// 获取公司下拉的接口
			getBrandList() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/pro-brand/getBrandList`, {}, this.newUrl).then(res => {
					console.log(res, '贵公司');
					let data = res.data.data.map(items => {
						return {
							label: items.title,
							id: items.id,
							item: items
						}
					})
					this.Companycolumns = [data]
				}).catch(Error => {
					console.log(Error, 'Error');
				})
			},
			// 获取产品类型
			getProductType() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/pro-cate/getProductType`, {}, this.newUrl).then(res => {
					console.log(res, '产品类型');
					let data = res.data.data.map(items => {
						return {
							label: items.type_name,
							id: items.type_id,
							item: items
						}
					})
					this.ProductTypecolumns = [data]
				}).catch(Error => {
					console.log(Error, 'Error');
				})
			},
			// 获取产品
			getProduct(Company_id, ProductType_id) {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/product/getProduct`, {
					brand_id: Company_id,
					cate_id: ProductType_id ? ProductType_id : 1
				}, this.newUrl).then(res => {
					console.log(res, '产品');
					let data = res.data.data.map(items => {
						return {
							label: items.title,
							id: items.id,
							item: items
						}
					})
					this.Productcolumns = [data]
				}).catch(Error => {
					console.log(Error, 'Error');
				})
			},
			// 选择公司
			Companyconfirm(e) {
				this.CompanyTip = e.value[0].label
				this.Company_id = e.value[0].id
				this.getProduct(this.Company_id, this.ProductType_id)
				this.Companyshow = false
			},
			// 选择产品类型
			ProductTypeconfirm(e) {
				this.ProductTypeTip = e.value[0].label
				this.ProductType_id = e.value[0].id
				this.getProduct(this.Company_id, this.ProductType_id)
				this.ProductTypeshow = false
			},
			// 选择产品
			Productconfirm(e) {
				this.ProductTip = e.value[0].label
				this.FormData.product_id = e.value[0].id
				this.Productshow = false
			},
			ProductTall() {
				if (this.CompanyTip) {
					this.ProductTypeshow = true
				} else {
					this.$ToastFail(this.$t('selectompany'))
				}
			},
			Producttoc() {
				if (this.ProductTypeTip) {
					this.Productshow = true
				} else {
					this.$ToastFail(this.$t('selectproduct'))
				}
			},
			// 可以添加多个agent
			addAgent() {
				let agentObj = {
					user_id: null,
					create_name: '',
					share_rate: '',
					create_level: '',
					search_id: ''
				}
				this.splitAgentData.push(agentObj)
			},
			// 移除某个agent
			remove(index) {
				if (this.splitAgentData.length > 1) {
					this.splitAgentData.splice(index, 1)
				}
			},
			// 选择创建时间
			// dateconfirm(e) {
			// 	let date = new Date(e.value)
			// 	let year = date.getFullYear().toString().padStart(2, '0')
			// 	let month = (date.getMonth() + 1).toString().padStart(2, '0')
			// 	let day = date.getDate().toString().padStart(2, '0')
			// 	this.FormData.deal_time = `${year}-${month}-${day} 00:00:00`
			// 	this.createdateshow = false
			// },
			// 获取当前年月日
			getDateBao() {
				var timestamp = new Date().getTime();
				let date = new Date(timestamp)
				let year = date.getFullYear().toString().padStart(2, '0')
				let month = (date.getMonth() + 1).toString().padStart(2, '0')
				let day = date.getDate().toString().padStart(2, '0')
				// this.FormData.deal_time = `${year}-${month}-${day}`
				this.deal_time_tips = `${year}-${month}-${day}`
			},
			// 根据输入的agentid查对应的人
			searchAgentId(index) {
				this.$get(`/backend/user/getUserInfoById`, {
					id: this.splitAgentData[index].search_id
				}, this.newUrl).then(res => {
					if (res.status) {
						this.splitAgentData[index].create_name = res.data.data.real_name
						this.splitAgentData[index].create_level = res.data.data.level.name
						this.splitAgentData[index].user_id = res.data.data.id
						console.log(res);
					} else {
						this.$ToastFail(`${res.message}`)
						this.splitAgentData[index].create_name = ''
						this.splitAgentData[index].create_level = ''
						this.splitAgentData[index].user_id = null
						this.splitAgentData[index].search_id = ''
						this.splitAgentData[index].share_rate = ''

					}
				})
			},
			// 请求接口提交数据
			submit() {

				this.FormData.share_rate = this.splitAgentData
				if (!this.FormData.number) {
					this.$ToastFail(this.$t('AddNewPolicy.Policynumber.tips'))
					return
				}
				if (!this.CompanyTip) {
					this.$ToastFail(this.$t('AddNewPolicy.SelectaCompany.tips'))
					return
				}
				if (!this.ProductTypeTip) {
					this.$ToastFail(this.$t('AddNewPolicy.PleaseSelectProductType.tips'))
					return
				}
				if (!this.ProductTip) {
					this.$ToastFail(this.$t('AddNewPolicy.PleaseSelectProduct.tips'))
					return
				}

				if (!this.FormData.protect_user) {
					this.$ToastFail(this.$t('AddNewPolicy.Insured.tips'))
					return
				}

				if (!this.FormData.money) {
					this.$ToastFail(this.$t('AddNewPolicy.FaceAmount.tips'))
					return
				}

				if (!this.FormData.sign_city) {
					this.$ToastFail(this.$t('AddNewPolicy.State.tips'))
					return
				}

				// if (!this.FormData.deal_time) {
				// 	this.$ToastFail(this.$t('selectcreationate'))
				// 	return
				// }
				var sum = 0;
				let fagkong = false
				this.splitAgentData.forEach(items => {
					sum += items.share_rate ? parseFloat(items.share_rate) : 0
					if (items.share_rate == '') {
						fagkong = true
					}
				})

				if (fagkong) {
					this.$ToastFail(this.$t('AddNewPolicy.guarantee.tips'))
					return
				}

				if (sum != 100) {
					this.$ToastFail(this.$t('AddNewPolicy.guaranteetotal.tips'))
					return
				}
				
				this.FormData.deal_time = `${this.deal_time_tips} 00:00:00`
				uni.showModal({
					title: this.$t('modelTitle'),
					content: this.$t('policySubmitInfo'),
					cancelText: this.$t('Cancel'),
					confirmText: this.$t('Confirm'),
					confirmColor: '#ef111b',
					cancelColor: '#000000',
					success: function(res) {
				
						//变量接this
						var that = this
						if (res.confirm) {
							// 执行确认后的操作
							that.submitApi()
						} else {
							// 执行取消后的操作
						}
				
						// 给弹框绑定this
					}.bind(this)
				})

			},
			// 提交请求接口
			submitApi() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$post(`/backend/order/create`, this.FormData, this.newUrl).then(res => {
					if (res.status) {
						this.$ToastOk(`${res.data.msg}`)
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/Policies/Policies'
							})
						}, 1000)
					} else {
						this.$ToastFail(`${res.message}`)
					}
				})
			}
		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
		background-color: #F0F0F0;
		/* padding-bottom: 60rpx; */
		padding: 40rpx 30rpx 120rpx;
	}

	.items {
		background-color: #fff;
		width: 100%;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.row {
		width: 100%;
		/* background-color: brown; */
	}

	.rowTitle {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 700;
		letter-spacing: 0em;
		text-align: left;
		margin: 0 0 20rpx;
	}

	.rowContnet {
		width: 100%;
		height: 64rpx;
		border-radius: 10rpx;
		border: 2rpx solid #979797;

	}

	.rowContnet111 {
		width: 100%;
		height: 150rpx;
		border-radius: 10rpx;
		border: 2rpx solid #979797;
		/* background-color: aqua; */
	}

	.li {
		display: flex;
		margin-bottom: 20rpx;
	}

	.rowsw {
		width: 300rpx;
		display: flex !important;
		align-items: center;
		justify-content: center;
		display: inline-block;
		height: 64rpx;
		border-radius: 10rpx;
		background-color: #273562;

	}

	.rowsw span {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #fff;
		margin-left: 15rpx;
	}

	.selectBox {
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.selectBox:last-child {
		margin-bottom: 0;
	}

	.selectBox span {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0em;
		text-align: left;
		color: #808080;
	}

	.AgentBox {
		width: 100%;
		/* height: 400rpx; */
		/* background-color: red; */
		margin: 60rpx 0 24rpx;
		border: 2rpx solid #979797;
		border-radius: 5rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.remove {
		width: 184rpx;
		height: 64rpx;
		border-radius: 10rpx;
		line-height: 64rpx;
		border: 2rpx solid #273562;
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #273562;
		margin: 36rpx 0 60rpx;
	}

	.remove:active {
		background-color: #eee;
	}
	.icon {
		margin-top: 10rpx;
	}
</style>